<template>
	<div class="setting">
		<div class="setting-utils">
			<mac-header />
			<div class="setting-content">
				<el-tabs tab-position="left" style="height:100%;">
					<el-tab-pane>
						<span slot="label">
							<i class="el-icon-setting"></i> 基础</span
						>
						<basic-setting />
					</el-tab-pane>
					<el-tab-pane>
						<span slot="label"
							><i class="el-icon-microphone"></i> 语音</span
						>
						<speech-setting />
					</el-tab-pane>
					<el-tab-pane>
						<span slot="label"
							><i class="el-icon-chat-line-square"></i> 回复</span
						>
						<reply-setting />
					</el-tab-pane>
					<el-tab-pane>
						<span slot="label"
							><i class="el-icon-headset"></i> 点歌</span
						>
						<music-setting />
					</el-tab-pane>

					<!-- 此处后期想开发全屏弹幕姬 start -->
					<!-- <el-tab-pane>
						<span slot="label"
							><i class="iconfont icon-danmushu"></i> 弹幕</span
						>
						<barrage-setting />
					</el-tab-pane> -->
					<!-- 此处后期想开发全屏弹幕姬 end -->

					<el-tab-pane>
						<span slot="label"
							><i class="el-icon-s-operation"></i> 其它</span
						>
						<other-setting />
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
import MusicSetting from "./components/MusicSetting.vue";
import BasicSetting from "./components/BasicSetting.vue";
import SpeechSetting from "./components/SpeechSetting.vue";
import BarrageSetting from "./components/BarrageSetting.vue";
import OtherSetting from "./components/OtherSetting.vue";
import ReplySetting from "./components/ReplySetting.vue";
import MacHeader from "./components/MacHeader.vue";
export default {
	components: {
		BasicSetting,
		MusicSetting,
		SpeechSetting,
		BarrageSetting,
		OtherSetting,
		ReplySetting,
		MacHeader,
	},
};
</script>

<style lang="scss">
.setting {
	height: 100vh;
	padding: 10px;
	.setting-utils {
		height: 100%;
		overflow: hidden;
		background-color: #fff;
		border-radius: 15px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
		.setting-content {
			overflow: auto;
			height: calc(100% - 30px);
			.el-tabs {
				.el-tabs__header {
					.el-tabs__nav {
						.iconfont {
							font-size: 14px;
						}
					}
				}
				.el-tabs__content {
					overflow: auto;
					height: 100%;
					padding: 10px;
					.el-tab-pane {
						.title {
							display: inline-block;
							padding-bottom: 3px;
							margin-bottom: 10px;
							font-weight: bold;
							border-bottom: 3px solid #1989fa;
							letter-spacing: 2px;
						}
						.el-form {
							.el-form-item {
								&.input {
									.el-input {
										width: 180px;
									}
								}
								.el-slider {
									width: 180px;
								}
								&.btn {
									width: 444px;
									padding-right: 40px;
									text-align: right;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
